<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="keyword" >
    <input type="button" value="过滤" onclick="filter()">
    <input type="button" value="新增" onclick="add()">
    <table>
        <tbody>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>age</td>
                <td>操作</td>
            </tr>
        </tbody>
   
    </table>



    <script src="./js/axios.min.js"></script>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        const url = "http://localhost:8080"

        $(function(){
           axios.get(url).then((res)=>{
                res.data.forEach(e => {
                    let html = 
                    `
                     <tr name="data${e.id}">
                        <td>${e.id}</td>
                        <td>${e.name}</td>
                        <td>${e.age}</td>
                         <td><input type="button" value="编辑" onclick="edit(${e.id})"><input type="button" value="删除" onclick="del(${e.id})"></td>
                    </tr>
                    `
                    $("tbody").append(html)
                });
                
            
           })



        })

        function add(){
             location.href=`./add.html`
        }

        function filter(){
            let keyword = $("[name=keyword]").val()
            $("tr[name^=data]" ).remove()
            axios.get(`${url}?keyword=${keyword}`).then((res)=>{
                res.data.forEach(e => {
                    let html = 
                    `
                     <tr name="data${e.id}">
                        <td>${e.id}</td>
                        <td>${e.name}</td>
                        <td>${e.age}</td>
                         <td><input type="button" value="编辑" onclick="edit(${e.id})"><input type="button" value="删除" onclick="del(${e.id})"></td>
                    </tr>
                    `
                    $("tbody").append(html)
                });
                
            })
        }
        


        function del(id){
           if(confirm("是否要删除")){
                axios.delete(`${url}/${id}`)
           }
        }

        function edit(id){
            location.href=`./add.html?id=${id}`
        }



            
    </script>
    
</body>
</html>